<template>
  <div class="home">
    
       <Getlist> </Getlist>
       <el-card>
         <div class="chand">电台推荐</div>
      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch='true'>
          <el-tab-pane :label="title[index].name" :name="itm.index" v-for="(itm,index) in list" :key="index">
            <div class="main">
             <ul>
              
              <li v-for="(itm,index) in itm.djRadios" :key="index">
                
                <div class="img">
                  <img v-lazy="itm.intervenePicUrl" alt="">
                </div>
                <div class="foot">
                  <div class="text">{{itm.lastProgramName}}</div>
                  <div class="tex">作者: <span> {{itm.name}}</span></div>
                </div>
              </li>
            </ul>
            </div>
           <router-link :to="{name:'Modj',params:{id:title[index].id}}" tag="div" class="svg">{{title[index].name}}加载更多。。。。</router-link>
          </el-tab-pane>
        
      </el-tabs>
      </el-card>
  </div>
</template>

<script>

import Getlist from '@/components/getlist.vue'
export default {
  data(){
   return{
      activeName: '1',
      list:[],
      title:
        [
          {
          id:2,
          name: "放松音乐故事"
          },
          {
          id:3,
          name: "情感故事推荐",
          },
          {
          id:5,
          name: "慢节奏生活"
          },
         ]

   }
  },
  name: 'Home',
  components: {
     Getlist
  },
  created(){
     this.getlist()
     this.getlist2()
     this.getlist3()
  },
  methods:{
    handleClick(tab){
    console.log(tab);
    },
    getlist(){
      this.$http.get('/api/dj/recommend/type',{params:{type:2}}).then(res=>{
        // console.log(res.data.djRadios,'1///////////');
        this.list.push(res.data)
      })
    },
      getlist2(){
      this.$http.get('/api/dj/recommend/type',{params:{type:3}}).then(res=>{
        // console.log(res.data.djRadios,'2///////////');
         this.list.push(res.data)
      })
    },
      getlist3(){
      this.$http.get('/api/dj/recommend/type',{params:{type:6}}).then(res=>{
        // console.log(res.data.djRadios,'3///////////');
         this.list.push(res.data)
      })
    },
  }
  
}
</script>

<style lang="less" scoped>
.home{
  background-color: rgba(204, 177, 177, 0.2);
  height: 100%;
  width: 100%;
  
}
.svg{
  height: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text{
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 35px;
  color: rgb(241, 226, 12);
}
.tex{
  color: white;
}
.tex span{
  font-size: 12px;
  color: red;
}
.itm{
  width: 700px;
  height: 600px;

}

.main ul li{
  background:-webkit-linear-gradient(left,black,rgb(105, 100, 100));
 

  margin-bottom: 5px;
  display: flex;
   border-bottom: 1px solid #000;

}
.img{
  width: 80px;
  height: 80px;
  border-radius: 10px;
}
.img img{
  width: 80px;
  height: 80px;
  border-radius: 10px;
}
// /deep/.el-tabs.el-tabs--top{
//       background-color: rgb(80, 79, 79);  
// }
.chand{
  color: #000;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 10px;
}
/deep/.el-tabs__item{
  font-weight: 900;
  font-size: 16px;
}


</style>
